import { lazy, Suspense, useMemo } from 'react';
import { useRoutes } from "react-router-dom";
import NotFound from 'src/components/NotFound'

const Login = lazy(() => import('src/pages/Login'))
const Register = lazy(() => import('src/pages/Register'))
const Home = lazy(() => import('src/pages/Home'))
const Iframe = lazy(() => import('src/pages/Iframe'))
const OrderInfo = lazy(() => import('src/pages/OrderInfo'))
const OrderList = lazy(() => import('src/pages/OrderList'))
const Setting = lazy(() => import('src/pages/Setting'))
const Shopcategory = lazy(() => import('src/pages/Shopcategory'))
const ShopInfo = lazy(() => import('src/pages/ShopInfo'))
const ShopList = lazy(() => import('src/pages/ShopList'))
const Upload = lazy(() => import('src/pages/Upload'))
const UserInfo = lazy(() => import('src/pages/UserInfo'))
const UserList = lazy(() => import('src/pages/UserList'))
const FoodList = lazy(() => import('src/pages/FoodList'))
const Address = lazy(() => import('src/pages/Address'))
const AdminList = lazy(() => import('src/pages/AdminList'))

const AdminSet = lazy(() => import('src/pages/AdminSet'))
const AddGoods = lazy(() => import('src/pages/AddGoods'))
const AddShop = lazy(() => import('src/pages/AddShop'))

// Echarts
const Echarts = lazy(() => import('src/pages/Echarts'))
const EchartsDemo1 = lazy(() => import('src/pages/Echarts/Demo1'))
const EchartsDemo2 = lazy(() => import('src/pages/Echarts/Demo2'))
const EchartsDemo3 = lazy(() => import('src/pages/Echarts/Demo3'))
const EchartsDemo4 = lazy(() => import('src/pages/Echarts/Demo4'))
const EchartsDemo5 = lazy(() => import('src/pages/Echarts/Demo5'))
// const EchartsDemo6 = lazy(() => import('src/pages/Echarts/Demo6'))
// const EchartsDemo7 = lazy(() => import('src/pages/Echarts/Demo7'))
// const EchartsDemo8 = lazy(() => import('src/pages/Echarts/Demo8'))
// D3
// const D3 = lazy(() => import('src/pages/D3'))
// const D3Demo1 = lazy(() => import('src/pages/D3/Demo1'))
// G6
const G6 = lazy(() => import('src/pages/G6'))
const G6Demo1 = lazy(() => import('src/pages/G6/Demo1'))
const Dag = lazy(() => import('src/pages/Dag/pages'))

function RouterView(props) {

    const { open_new_tab } = props;

    function open_new_tab_window(link, title, src) {
        let url = `${window.location.origin}/#/${link}`
        if (src) {
            //如果是iframe直接打开iframe
            url = src.startsWith('/') ? `${window.location.origin}${src}` : src
        }
        try {
            window.open('javascript:window.name;', `<script>location.replace("${url}")</script>`);
        } catch (e) {
            window.open(url, '', 'height=500,width=611,scrollbars=yes,status =yes')
        }
    }

    const open_tab = useMemo(() => {
        return open_new_tab || open_new_tab_window
    }, [open_new_tab])

    const elements = useRoutes([
        {
            path: 'login',
            element: <Suspense fallback={null}>
                <Login open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'register',
            element: <Suspense fallback={null}>
                <Register open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'home',
            element: <Suspense fallback={null}>
                <Home open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'iframe/:id',
            exact: false,
            element: <Suspense fallback={null}>
                <Iframe open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'orderinfo',
            element: <Suspense fallback={null}>
                <OrderInfo open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'orderlist',
            element: <Suspense fallback={null}>
                <OrderList open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'setting',
            element: <Suspense fallback={null}>
                <Setting open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'shopcategory',
            element: <Suspense fallback={null}>
                <Shopcategory open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'shopinfo',
            element: <Suspense fallback={null}>
                <ShopInfo open_tab={open_tab} />
            </Suspense>
        },
        {
            path: "shoplist",
            element: <Suspense fallback={null}>
                <ShopList open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'upload',
            element: <Suspense fallback={null}>
                <Upload open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'userinfo',
            element: <Suspense fallback={null}>
                <UserInfo open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'userlist',
            element: <Suspense fallback={null}>
                <UserList open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'adminlist',
            element: <Suspense fallback={null}>
                <AdminList open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'addshop',
            element: <Suspense fallback={null}>
                <AddShop open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'addgoods',
            element: <Suspense fallback={null}>
                <AddGoods open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'adminset',
            element: <Suspense fallback={null}>
                <AdminSet open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'foodlist',
            element: <Suspense fallback={null}>
                <FoodList open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'address',
            element: <Suspense fallback={null}>
                <Address open_tab={open_tab} />
            </Suspense>
        },
        {
            path: 'echarts',
            element: <Suspense fallback={null}>
                <Echarts open_tab={open_tab} />
            </Suspense>,
            children: [
                {
                    path: 'demo1',
                    index: true,
                    element: <Suspense fallback={null}>
                        <EchartsDemo1 open_tab={open_tab} />
                    </Suspense>
                },
                {
                    path: 'demo2',
                    element: <Suspense fallback={null}>
                        <EchartsDemo2 open_tab={open_tab} />
                    </Suspense>
                },
                {
                    path: 'demo3',
                    element: <Suspense fallback={null}>
                        <EchartsDemo3 open_tab={open_tab} />
                    </Suspense>
                },
                {
                    path: 'demo4',
                    element: <Suspense fallback={null}>
                        <EchartsDemo4 open_tab={open_tab} />
                    </Suspense>
                },
                {
                    path: 'demo5',
                    element: <Suspense fallback={null}>
                        <EchartsDemo5 open_tab={open_tab} />
                    </Suspense>
                },
                // {
                //     path: 'demo6',
                //     element: <Suspense fallback={null}>
                //         <EchartsDemo6 open_tab={open_tab} />
                //     </Suspense>
                // },
                // {
                //     path: 'demo7',
                //     element: <Suspense fallback={null}>
                //         <EchartsDemo7 open_tab={open_tab} />
                //     </Suspense>
                // },
                // {
                //     path: 'demo8',
                //     element: <Suspense fallback={null}>
                //         <EchartsDemo8 open_tab={open_tab} />
                //     </Suspense>
                // },
            ]
        },
        // {
        //     path: 'd3',
        //     element: <Suspense fallback={null}>
        //         <D3 open_tab={open_tab} />
        //     </Suspense>,
        //     children: [
        //         {
        //             path: 'demo1',
        //             index: true,
        //             element: <Suspense fallback={null}>
        //                 <D3Demo1 open_tab={open_tab} />
        //             </Suspense>,
        //         }
        //     ]
        // },
        {
            path: 'g6',
            element: <Suspense fallback={null}>
                <G6 open_tab={open_tab} />
            </Suspense>,
            children: [
                {
                    path: 'demo1',
                    index: true,
                    element: <Suspense fallback={null}>
                        <G6Demo1 open_tab={open_tab} />
                    </Suspense>,
                }
            ]
        },
        {
            path: 'dag',
            element: <Suspense fallback={null}>
                <Dag open_tab={open_tab} />
            </Suspense>,
        },
        {
            path: '*',
            element: <Suspense fallback={null}>
                <NotFound open_tab={open_tab} />
            </Suspense>
        },

    ])
    return elements
}

export default RouterView